<template>
<div class="view-pages">
  <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
    <!-- slides -->
    <swiper-slide v-for="item in swiperList" :key="item.id">
      <img class="swiper-img" :src="item.img"/>
    </swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
</div>
</template>

<script>
    export default {
      name: "iviewPages",
      data () {
          return {
            swiperOption: {
              pagination: {
                el: '.swiper-pagination'
              }
            },
            swiperList: [
              {
                id: 1,
                img: require('../../../assets/img/swiper1.jpeg')
              },
              {
                id: 2,
                img: require('../../../assets/img/swaper3.jpeg')
              },
              {
                id: 3,
                img: require('../../../assets/img/swiper2.jpg')
              }
            ]

          }
      },
      computed: {
        swiper() {
          return this.$refs.mySwiper.swiper
        }
      },
      mounted() {
        // current swiper instance
        // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
        console.log('this is current swiper instance object', this.swiper)
        this.swiper.slideTo(3, 1000, false)
      },
      methods: {
        callback () {
          console.log(1)
        }
      }
    }
</script>

<style lang="stylus" scoped>
  .view-pages >>> .swiper-pagination-bullet
    background #ffffff !important
    /*width 100%*/
    /*height 0*/
    /*padding-bottom 100%*/
    /*overflow hidden*/
  .view-pages
    /*line-height 1.5rem*/
    width auto
    .swiper-img
      height 3.3rem
      width 100%

</style>
